@media (min-width:769px) {
  .container {
    margin-top: 80px;

    .acitivity-details {
      .details-text {
        width: 810px;
        height: 200px;
        margin: 0 auto;
        padding: 50px 65px 0px;
        box-sizing: border-box;

        .date {
          text-align: right;
          h3 {
            line-height: 1;
            font-size: 60px;
          }

          p {
            line-height: 2.5;
            font-size: 16px;
          }
        }

        .text {
          margin-left: 205px;
          h3 {
            font-size: 16px;
          }

          p {
            margin-top: 25px;
            line-height: 2;
            font-size: 12px;
          }
        }


      }
      .swiper-wrapper {
        margin-bottom: 120px;
      }
      .swiper-pagination {
        bottom: 35px;
      }
    }

    .banner {
      filter: grayscale(100%);
      transition: filter .6s linear;

      &:hover {
        filter: none;
      }
    }

    .commit-title {
      margin: 100px auto 60px;
    }
  }
}

@media (max-width:768px) {
  .container {
    margin-top: 80px;
    .acitivity-details {
      .details-text {
        
        height: 160px;
        margin: 20px auto 0;
        padding: 5px;
        box-sizing: border-box;

        .date {
          text-align: right;
          h3 {
            line-height: 1;
            font-size: 20px;
          }

          p {
            line-height: 2.5;
            font-size: 15px;
          }
        }

        .text {
          margin-left: 70px;
          h3 {
            font-size: 16px;
          }

          p {
            margin-top: 15px;
            line-height: 2;
            font-size: 12px;
          }
        }


      }
      .swiper-wrapper {
        margin-bottom: 100px;
      }
      .swiper-pagination {
        bottom: 40px;
      }
    }

  }
}